<template>
  <div>
    <!-- 构建长列表 -->
    <m-infinite
      v-model="isLoading"
      :isFinished="isFinished"
      @onLoad="getPexels"
    >
      <m-waterfall
        class="px-1 w-full"
        :data="pexelsList"
        nodeKey="id"
        :column="isMobileTerminal ? 2 : 5"
        :picturePerReading="false"
      >
        <template #default="{ item, width }">
          <itemVue
            :data="item"
            :key="item.id"
            :width="width"
            @clicktoPins="clicktoPins"
          />
        </template>
      </m-waterfall>
    </m-infinite>
    <!-- 详情内容展示 -->
    <transition
      :css="false"
      @before-enter="onBeforeEnter"
      @enter="onEnter"
      @leave="onLeave"
    >
      <PinsVue v-if="isVisiblePins" :id="currentPins.id"></PinsVue>
    </transition>
  </div>
</template>

<script setup>
import { ref, reactive, watch, toRefs, onMounted } from 'vue'
import { getPexelsList } from '@/api/pexels.js'
import itemVue from './item.vue'
import { isMobileTerminal } from '@/utils/flexibal.js'
import store from '../../../../store'
import PinsVue from '@/views/pins/components/pins.vue'
import gsap from 'gsap'
import { useEventListener } from '@vueuse/core'

const pexelsList = ref([])
let params = reactive({
  page: 1,
  size: 20
})
// 数据是否在加载中
const isLoading = ref(false)
// 数据是否加载完成
const isFinished = ref(false)
// 获取数据
const getPexels = async () => {
  // 如果数据加载完成则直接打断
  if (isFinished.value) return
  // 如果是第一次请求则设置页码为1 后续请求则页码递增
  if (pexelsList.value.length > 0) {
    params.page++
  }
  // 触发接口请求数据
  const { data } = await getPexelsList(params)
  if (params.page == 1) {
    pexelsList.value = data.list
  } else {
    pexelsList.value = pexelsList.value.concat(data.list)
  }
  // 如果数据加载完毕zai 完成则设置数据加载完成
  if (data.list.length == data.total) {
    isFinished.value = true
  }
  isLoading.value = false
}

// 重新加载数据
const retsetParams = (query) => {
  params = { ...params, ...query }
  isFinished.value = false
  pexelsList.value = []
}

watch(
  () => store.getters.currentCategory,
  (newValue) => {
    retsetParams({
      page: 1,
      categoryId: newValue.id
    })
  }
)
watch(
  () => store.getters.isSearch,
  (value) => {
    if (!value) return
    retsetParams({
      page: 1,
      searchText: store.getters.searchText
    })
  }
)
// 是否点击详情
const isVisiblePins = ref(false)
// 当前点击的项
const currentPins = ref({})

// 监听浏览器后退事件
useEventListener(window, 'popstate', () => {
  isVisiblePins.value = false
})
// 进入详情
const clicktoPins = (item) => {
  // console.log('item', item)
  currentPins.value = item
  isVisiblePins.value = true
  history.pushState(null, null, `/pins/${item.id}`)
}
// 在元素被插入到 DOM 之前被调用,用这个来设置元素的 "enter-from" 状态
const onBeforeEnter = (el) => {
  gsap.set(el, {
    opacity: 0,
    scaleX: 0,
    scaleY: 0,
    transformOrigin: '0 0',
    translateX: currentPins.value.location?.translateX,
    translateY: currentPins.value.location?.translateY
  })
}
// 在元素被插入到 DOM 之后的下一帧被调用,用这个来开始进入动画
const onEnter = (el, done) => {
  gsap.to(el, {
    opacity: 1,
    scaleX: 1,
    scaleY: 1,
    translateX: 0,
    translateY: 0,
    duration: 0.3,
    onComplete: done
  })
}
// 在离开过渡开始时调用,用这个来开始离开动画
const onLeave = (el, done) => {
  gsap.to(el, {
    opacity: 0,
    scaleX: 0,
    scaleY: 0,
    translateX: currentPins.value.location?.translateX,
    translateY: currentPins.value.location?.translateY,
    duration: 0.3,
    onComplete: done
  })
}
</script>
<style scoped lang="scss"></style>
